<template>
  <div 
    class="app-container" 
    v-loading="pageLoading"
    element-loading-text="正在解析中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >

    <div class="left-container">
      <el-upload
        class="upload"
        method="post"
        :multiple="false"
        :action="upload.url"
        :headers="upload.headers"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :show-file-list="false"
        drag
        accept=".xlsx, .xls"
      >
        <div class="upload-card">
          <div v-if="isFileEmpty" class="empty">
            <img src="@/assets/images/sjyssh/upload-icon.svg" class="upload-icon">
            <div class="upload-title">点击或拖拽文件到此处</div>
            <div class="upload-desc">文件格式：Excel</div>
            <div class="upload-desc">文件大小：文件最大支持50M</div>
          </div>
          <div v-else class="file">
            <img src="@/assets/images/sjyssh/excel-icon.svg" class="file-icon">
            <div class="file-name" :title="file.name">{{ file.name }}</div>
            <img @click.stop="onResetFile" src="@/assets/images/sjyssh/delete-icon.svg" class="delete-icon">
          </div>
        </div>
      </el-upload>
    </div>
    <div class="rigth-container">
      <img v-if="isFileEmpty" src="@/assets/images/sjyssh/empty.png">

      <div class="table-wrap" v-else>
        <div class="desc">
          您本次审核 <span>{{resultDataCount.length}}</span> 个数据模型元素，审核通过元素 <span class="success">{{checkOkNum}}</span> 个，审核不通过元素 <span class="fail">{{checkFailNum}}</span> 个，不通过明细如下：
        </div>
        <el-table
          v-loading="loading"
          :data="resultData"
          border
          style="width: 100%; flex: 1;"
          :row-style="getRowStyle"
          :cell-style="getCellStyle"
          :header-cell-style="getHeaderCellStyle"
        >
          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>

          <el-table-column label="输入元素英文名" prop="输入元素英文名" align="center" show-overflow-tooltip/>
          <el-table-column label="输入元素中文名" prop="输入元素中文名" align="center" show-overflow-tooltip/>
          <el-table-column label="输入说明" prop="输入说明" align="left" show-overflow-tooltip/>

          <el-table-column label="操作" align="center" width="110">
            <template slot-scope="scope">
              <el-button type="text" @click="onDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
          
          <!-- <el-table-column label="相似记录条数" prop="相似记录条数" align="center" />
          
          <el-table-column label="相似记录" align="center">
            <template slot-scope="{row}">
              <el-popover
                placement="right"
                width="600"
                trigger="click"
              >
                <el-table :data="row['相似记录']">
                  <el-table-column property="数据元素中文名" label="中文名" />
                  <el-table-column property="数据元素英文名" label="英文名" />
                  <el-table-column property="说明" label="说明" />
                </el-table>
                <el-button slot="reference" type="text">查看详情（{{ row['相似记录条数'] }}条）</el-button>
              </el-popover>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>

    <detail-dialog ref="detailDialog"></detail-dialog>


    <!-- 结果展示区 -->
    <el-table
      v-loading="loading"
      :data="resultData"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 20px;display: none;"
    >
      <el-table-column label="输入元素中文名" prop="输入元素中文名" align="center" />
      <el-table-column label="输入元素英文名" prop="输入元素英文名" align="center" />
      <el-table-column label="输入说明" prop="输入说明" align="center" />
      
      <el-table-column label="审核结果" align="center">
        <template slot-scope="{row}">
          <el-tag
            :type="row['审核结果'] | statusFilter"
            effect="dark"
          >{{ row['审核结果'] }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="相似记录条数" prop="相似记录条数" align="center" />
      
      <el-table-column label="相似记录" align="center">
        <template slot-scope="{row}">
          <el-popover
            placement="right"
            width="600"
            trigger="click"
          >
            <el-table :data="row['相似记录']">
              <el-table-column property="数据元素中文名" label="中文名" />
              <el-table-column property="数据元素英文名" label="英文名" />
              <el-table-column property="说明" label="说明" />
            </el-table>
            <el-button slot="reference" type="text">查看详情（{{ row['相似记录条数'] }}条）</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import DetailDialog from './detailDialog';
// import data from './data.json';

export default {
  name: 'Ysmx',
  components: {
    DetailDialog
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '通过': 'success',
        '不通过': 'danger',
        '用户未输入元素': 'warning'
      }
      return statusMap[status] || 'info'
    }
  },
  data() {
    return {
      upload: {
        url: process.env.VUE_APP_BASE_API + '/ysmxUpload',
        headers: { Authorization: 'Bearer ' + getToken() }
      },
      resultData:  [],
      loading: false,
      pageLoading: false,
      file: null,
    }
  },
  computed: {
    isFileEmpty() {
      return !this.file;
    },
    checkOkNum() {
      return this.resultDataCount.filter(item => item['审核结果'] === '通过').length;
    },
    checkFailNum() {
      return this.resultDataCount.filter(item => item['审核结果'] === '不通过').length;
    },
  },
  methods: {
    beforeUpload(file) {
      const isExcel = file.type.includes('spreadsheet') || 
        ['.xls', '.xlsx'].some(ext => file.name.endsWith(ext))
      const isLt50M = file.size / 1024 / 1024 < 50
      
      if (!isExcel) {
        this.$message.error('请上传Excel文件!')
        return false
      }
      if (!isLt50M) {
        this.$message.error('文件大小不能超过50MB!')
        return false
      }

      this.pageLoading = true;
      return true
    },

    async handleSuccess(response, file) {
      this.pageLoading = false;
      this.file = file;
      if (response.code != 200) {
        this.$message.error(response.message || '解析失败')
        return
      }
      this.resultDataCount = response.data
      this.resultData = response.data.filter(item => item['审核结果'] === '不通过');
      this.$message.success('解析成功')
    },
    async handleError(response,file) {
      this.file = null;
      this.pageLoading = false;
      if (response.code != 200) {
        console.log(response);
        this.$message.error(response.message || '解析失败')
        return
      }
      this.resultDataCount = response.data
      this.resultData = response.data.filter(item => item['审核结果'] === '不通过');
      this.$message.success('解析成功')
    },
    onResetFile() {
      this.file = null;
    },
    getRowStyle({rowIndex}) {
      console.log(rowIndex, 'row');
      return {
        background: rowIndex % 2 === 1 ? '#f2f3f8': '',
      };
    },
    getHeaderCellStyle() {
      return {
        ...this.getCellStyle(),
        background: '#fcfcfc',
      };
    },
    getCellStyle() {
      return { 
        height: '32px',
        'box-sizing': 'border-box', 
        padding: 0,
        'line-height': '32px',
      }
    },
    onDetail(row) {
      this.$refs.detailDialog.isShow(row['相似记录'] || []);
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 0;

  .left-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #DCE1EA;

    .upload {
      ::v-deep .el-upload{
        .el-upload-dragger {
          width: unset;
          height: unset;
          border: none;
        }
      }

      .upload-card {
        width: 342px;
        height: 302px;
        border-radius: 12px;
        background: #F5F9FF;
        box-sizing: border-box;
        border: 1px dashed #E1E1E1;

        .empty {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 62px;

          .upload-title {
            font-size: 16px;
            font-weight: 600;
            color: #3D3D3D;
            margin: 36px 0 16px;
          }

          .upload-desc {
            font-size: 12px;
            color: #8F8F8F;
            margin-bottom: 8px;
          }
        }

        .upload-tip {
          margin-top:48px;
        }

        .file {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 16px 16px 40px;
          box-sizing: border-box;

          .file-icon {
            width: 48px;
            height: 58px;
            margin: 46px 0 36px;
          }

          .file-name {
            max-width: 300px;
            font-size: 16px;
            color: #3D3D3D;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .delete-icon {
            width: 32px;
            height: 32px;
            margin-top: auto;
          }
        }
      }
    }
  }

  .rigth-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;

    .table-wrap {
      height: 100%;
      display: flex;
      flex-direction: column;

      .desc {
        font-size: 16px;
        color: #3D3D3D;
        margin-bottom: 16px;

        span {
          font-weight: 700;
        }
        .success{
          color: #0FB886;
        }
        .fail {
          color: #FD824C;
        }
      }
    }
  }
}

.filter-container {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 20px;
  display: none;
}

.el-upload__tip {
  margin-top: 8px;
  color: #606266;
  font-size: 12px;
}

::v-deep .el-table .cell {
  white-space: nowrap;
}
</style>